<!--
 * @Author: FengTeng
 * @Date: 2021-02-14 21:33:13
 * @LastEditTime: 2021-03-03 16:44:24
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\products-select-modal\ProductsSelectModal.vue
-->
<template>
  <div class="products-select-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-select
        v-model="selectedProducts"
        popper-class="products-select-popper"
        :popper-append-to-body="false"
        multiple
        allow-create
        @remove-tag="handleProductRemove($event)"
        placeholder="请选择商品或服务"
      >
      </el-select>
      <el-input class="products-search-input" v-model="searchWord" placeholder="请输入商品名称关键字"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
      <products-table
        :tableConfig="tableConfig"
        :tableData="tableData"
        :columnSet="columnSet"
        @page-change="handlePageChange($event)"
        @selected-change="handleSelectedChange($event)"
      ></products-table>
      <div class="products-option-button">
        <el-button type="info" @click="handleCancel()">取消</el-button>
        <el-button type="primary" @click="handleConfirm()">确定</el-button>
      </div>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
import ProductsTable from "@/components/table/products-table/ProductsTable.vue";
export default {
  name: "ProductsSelectModal",
  components: {
    SpaModal,
    ProductsTable
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      tableConfig: {
        // 分页配置
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        }
      },
      tableData: [],
      columnSet: [
        {
          label: "序号",
          prop: "productID",
          align: "center"
        },
        {
          label: "商品名称",
          prop: "productName",
          width: "140",
          align: "center"
        },
        {
          label: "商品类型",
          prop: "productType",
          align: "center"
        },
        {
          label: "价格",
          prop: "productPrice",
          align: "center"
        },
        {
          label: "数量",
          prop: "productNumber",
          align: "center"
        },
        {
          label: "负责人",
          prop: "director",
          align: "center"
        },
        {
          label: "操作",
          prop: "option",
          align: "center",
          customSlot: "customSlot"
        }
      ],
      selectedProducts: [], // 已选择的商品/服务
      searchWord: ""
    };
  },
  created() {
    this.initSelectedArray();
  },
  methods: {
    openModal(event) {
      console.log(event);
      this.requestProductsTableData();
      this.modalConfig.visible = true;
    },
    requestProductsTableData() {
      let that = this;
      $.post(
        apis.getProductsTableData,
        {
          pageIndex: this.tableConfig.pageConfig.page,
          pageSize: this.tableConfig.pageConfig.pageSize,
          type: "paging1"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.setProductsTableData(resp.data.tableData);
            that.tableConfig.pageConfig.total = resp.data.total;
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    setProductsTableData(tableData) {
      this.tableData = [];
      tableData.forEach(item => {
        let row = {
          productID: "",
          productName: "",
          productType: "",
          productPrice: "",
          productNumber: 0,
          director: "",
          option: "选择"
        };
        row.productID = item.id;
        row.productName = item.name;
        row.productType = item.leixin;
        row.productPrice = item.jiage;
        row.productNumber = item.number;
        row.director = item.fuzeren;
        this.tableData.push(row);
      });
    },
    handleSearch() {
      console.log("搜索事件");
      // let createdDate = new Date(+new Date(this.searchFormData.createdDate) + (8 * 3600 * 1000));
      // createdDate = this.formatDate(createdDate);
      this.tableConfig.pageConfig.page = 1;
      let that = this;
      $.post(
        apis.customerPoolProductsSearch,
        {
          type: "select",
          type1: "name",
          data: this.searchWord
          // pageIndex: this.tableConfig.pageConfig.page,
          // pageSize: this.tableConfig.pageConfig.pageSize
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            resp.data = [...resp.data.slice(0, 9)];
            that.setProductsTableData(resp.data);
            that.tableConfig.pageConfig.total = 10;
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    handlePageChange(event) {
      this.tableConfig.pageConfig.page = event;
      console.log("分页器", event);
    },
    handleSelectedChange(row) {
      if (row.option === "选择") {
        this.selectedProducts.push(row.productName);
        console.log(this.selectedProducts);
        row.option = "取消";
      } else {
        this.selectedProducts.splice(this.selectedProducts.indexOf(row.productName), 1);
        row.option = "选择";
      }
    },
    initSelectedArray() {
      this.tableData.forEach(item => {
        if (item.option === "取消") {
          this.selectedProducts.push(item.productName);
        }
      });
    },
    handleProductRemove(event) {
      console.log(event);
      this.tableData.forEach(item => {
        if (item.productName === event) {
          item.option = "选择";
        }
      });
    },
    handleDialogClose() {
      this.resetFormData();
    },
    handleCancel() {
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleConfirm() {
      console.log("提交表单");
      this.$emit("select-products", this.selectedProducts);
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    resetFormData() {
      console.log("重置表单");
      this.tableData = [];
      this.searchWord = "";
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
